<template>
    <div class="newDetail">
      <scroll>
        <div class="content-wrapper">
          <div class="bg-image"  v-if="data.image"><img :src="attachImageUrl(data.image)" v-lazy="attachImageUrl(data.image)"><span class="title">{{data.title}}</span></div>
          <div class="body morning" v-html="data.body" ></div>
        </div>
      </scroll>
      <!--<bottom-menu></bottom-menu>-->
    </div>
</template>

<script type="text/ecmascript-6">
  import axios from 'axios'
  import router from '../../router'
  import Scroll from 'base/scroll/scroll'
  // import BottomMenu from '../bottom-menu/bottom-menu'
  import {mapGetters} from 'vuex'

  export default {
    data() {
        return {
           data:{},                                 //初始化当前详情页数据
        }
    },
    //创建生命周期
    created() {
      this.fetchData();
    },
    //检测路由变化
    watch: {
      '$route'(to,form){
        this.fetchData();
      }
    },
    methods:{
      //获取详情页内容
//        fetchData() {
//         axios.get('api/news/'+ this.id).then((res) => {
//           res.data.body = this.attachBodyContent(res.data.body)
//           this.data = res.data;
//           console.log(res)
//         }).catch((error) => {
//             console.log(error)
//         });
// //        this.$store.dispatch('addNextId',this.id)
//       },


      fetchData() {
        axios.get('api/news/latest').then((res) => {
          res.data.body = this.attachBodyContent(res.data.body)
          this.data = res.data;
          console.log(res)
        }).catch((error) => {
            console.log(error)
        });
//        this.$store.dispatch('addNextId',this.id)
      },
      //替换头部背景图片url
      attachImageUrl(srcUrl) {
        if(srcUrl !== undefined){
          return srcUrl.replace(/http\w{0,1}:\/\/p/g,'https://images.weserv.nl/?url=p')
        }
      },
//       function showImg(url, id) {
//     var frameid = 'frameimg' + Math.random();
//     window.img = '<img id="img" src=\''+url+'?'+Math.random()+'\' /><script>window.onload = function() { parent.document.getElementById(\''+frameid+'\').height =document.getElementById(\'img\').height+\'px\'; }<'+'/script>';
//     $("#"+id).html('<iframe id="'+frameid+'" src="javascript:parent.img;" frameBorder="0" scrolling="no" width="100%"></iframe>');
// },
      //替换详情内容图片url
      attachBodyContent: function(body) {
        return body.replace(/src="http\w{0,1}:\/\//g, 'src="https://images.weserv.nl/?url=');
      }
    },
    computed:{
      //返回当前模式
      // model() {
      //   return this.isNight ? 'night' : 'morning'
      // },
      ...mapGetters([
        'id',
        'isNight'
      ])
    },
    //注册组件
    components:{
      Scroll,
      // BottomMenu
    }
  }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  @import "new-detail.styl"
  @import '../../../static/css/news_qa.auto.css'
</style>
